<template>
  <div>
    <div id="chart-container"></div>
    <el-input
              v-model="line1Value"
              style="width: 120px"
            ></el-input>
  </div>
  
  

</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'LineChartWithLines',
  data() {
    return {
      chart: null,
      line1Value: null,
      line2Value: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 初始化 Echarts 实例
      this.chart = echarts.init(document.getElementById('chart-container'));

      const data = [
        { x: 1, y: Math.random() * 100 },
        { x: 2, y: Math.random() * 100 },
        { x: 3, y: Math.random() * 100 },
        { x: 4, y: Math.random() * 100 },
        { x: 5, y: Math.random() * 100 },
        { x: 6, y: Math.random() * 100 },
        { x: 7, y: Math.random() * 100 },
        { x: 8, y: Math.random() * 100 },
        { x: 9, y: Math.random() * 100 },
        { x: 10, y: Math.random() * 100 },
      ];

      const option = {
        xAxis: {
          type: 'category',
          data: data.map(item => item.x),
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: data.map(item => item.y),
            type: 'line',
          },
        ],
        graphic: [
          {
            type: 'group',
            children: [
              {
                type: 'line',
                shape: {
                  x1: 0,
                  y1: 0,
                  x2: 0,
                  y2: this.chart.getHeight(),
                },
                style: {
                  stroke: 'red',
                },
                z: 100,
                draggable: true,
                onmousemove: (event) => this.onLineMove(1, event),
                ondrag: (event) => this.onLineDrag(1, event),
              },
              {
                type: 'line',
                shape: {
                  x1: 0,
                  y1: 0,
                  x2: 0,
                  y2: this.chart.getHeight(),
                },
                style: {
                  stroke: 'blue',
                },
                z: 100,
                draggable: true,
                onmousemove: (event) => this.onLineMove(2, event),
                ondrag: (event) => this.onLineDrag(2, event),
              },
            ],
          },
        ],
      };

      this.chart.setOption(option);
    },
    onLineMove(index, event) {
      const x = event.offsetX;
      const dataXAxis = this.chart.getOption().xAxis[0].data;
      const value = Math.round((x / this.chart.getWidth()) * dataXAxis.length);
      if (value >= 0 && value < dataXAxis.length) {
        if (index === 1) {
          this.line1Value = dataXAxis[value];
        } else if (index === 2) {
          this.line2Value = dataXAxis[value];
        }
      }
    },
    onLineDrag(index, event) {
      this.onLineMove(index, event);
    },
  },
};
</script>

<style>
#chart-container {
  width: 800px;
  height: 400px;
}
</style>